/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform,
    TouchableWithoutFeedback
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class AddLabel extends Component{
    constructor(props) {
        super(props);
        this.state = {
            selectLabel:[],
            areaList:['全国','同城','社区','周边'],
            serviceList:['救助','活体','服务','商品','公益','走失','寄养','聚会','旅游','问诊','训练','交友'],
            typeList:['全部','猫咪','狗狗','其他','金毛','阿拉斯加'],
            addText:'',
            inputWidth:40,
            selectArea:[],
            selectService:[]
        }; 
    }
    // 渲染的标签列表
    renderLabel(list,staturs,select){
        if(select==true){
            return(
                list.map((item,i)=>{
                    return(
                        <TouchableOpacity key={i}>
                            <View style={[styles.itemBox,{backgroundColor:'rgb(90,165,237)'}]}>
                                <Text style={{color:'#fff'}}>{item}</Text>
                            </View>
                        </TouchableOpacity>
                    )
                })
            )
        }else{
            return(
                list.map((item,i)=>{
                    return(
                        <TouchableOpacity key={i} onPress={()=>this.addSelect(item,staturs)}>
                            <View style={styles.itemBox}>
                                <Text style={{color:'rgb(79,145,237)'}}>{item}</Text>
                            </View>
                        </TouchableOpacity>
                    )
                })
            )
        }
        
    }

    render(){
        return (
            <View style={styles.container}>
                
                <NavigationBar 
                    leftIcon={'left'} 
                    titleText={'添加标签'} 
                    leftPress={()=>this.goBack()}
                    rightText={'保存'}
                    rightTextPress={()=>this.createFinish()}
                    rightTextStyle={{color:'#fff',fontSize:16}}/>
                <TouchableWithoutFeedback onPress={()=>this.inputBlur()}>
                    <View>
                        <TitleBar text={'已选择的标签'}/>
                        
                        <View style={styles.listArea}>
                            {this.renderLabel(this.state.selectLabel,0,true)}
                            <TextInput 
                                ref={(c) => this._input = c}
                                underlineColorAndroid={'transparent'}
                                style={{borderWidth:1,borderColor:'rgb(79,145,237)',paddingLeft:3,paddingRight:3,paddingTop:0,paddingBottom:0,color:'rgb(79,145,237)',height:28,width:this.state.inputWidth,textAlign:'center',borderRadius:3,marginTop:10}}
                                defaultValue={'添加'}
                                onSubmitEditing={()=>this.addLabelText()}
                                onChangeText={(text)=>this.textChange(text)}
                                returnKeyType={'添加'}/>
                        </View>
                        <TitleBar text={'请选择业务范围(*必选)'}/>
                        <View style={styles.listArea}>
                            {this.renderLabel(this.state.areaList,1)}
                        </View>
                        <TitleBar text={'请选择服务内容(*必选)'}/>
                        <View style={styles.listArea}>
                            {this.renderLabel(this.state.serviceList,2)}
                        </View>
                        <TitleBar text={'请选择俱乐部内的品种'}/>
                        <View style={styles.listArea}>
                            {this.renderLabel(this.state.typeList,3)}
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </View>
        )
    }
    // 返回按钮
    goBack(){
        this.props.navigation.goBack();
    }
    // 完成按钮点击事件
    createFinish(){
        if(this.state.selectArea.length==0){
            alert('请选择服务范围！');
            return;
        }else if(this.state.selectService.length==0){
            alert('请选择服务内容！');
            return;
        }
        this.props.navigation.state.params.getTags(this.state.selectLabel);
        this.goBack();
    }
    // 
    addSelect(text,staturs){
        // alert(text)
        var list = this.state.selectLabel;
        var len = list.length;
        if(len==8){
            alert('最多添加8个！');
            return;
        }
        for(var i=0;i<len;i++){
            if(list[i]==text){
                return;
            }
        }
        var areaArr = this.state.selectArea;
        var serviceArr = this.state.selectService;
        if(staturs==1){
            areaArr.push(text);
        }else if(staturs==2){
            serviceArr.push(text);
        }
        list.push(text);
        this.setState({
            selectLabel:list,
            selectArea:areaArr,
            selectService:serviceArr,
        })
    }
    // 添加标签获取输入框的内容
    textChange(text){
        var len = text.length;
        var codeLen = 0;
        var textLen = 0;
        for(var i=0;i<len;i++){
            if(/^[\u0000-\u00ff]$/.test(text[i])){
                codeLen+=1;
            }else{
                textLen+=1;
            }
        }
        this.setState({
            addText:text,
            inputWidth:((codeLen+textLen)>2?(codeLen*10+textLen*16):40)
        })
    }
    // 点击完成添加标签
    addLabelText(){
        var list = this.state.selectLabel;
        if(list.length==8){
            alert('最多添加8个！');
            return;
        }
        if(this.state.addText.replace(/^\s$/g,'').length>0){
            list.push(this.state.addText);
            this.setState({
                selectLabel:list,
                addText:''
            })
            this._input.clear();
        }
    }
    inputBlur(){
        this._input.blur();
    }
}

class TitleBar extends Component{
    render(){
        return(
            <View style={styles.titleBarBox}>
                <View style={styles.titleLeft}></View>
                <View>
                    <Text>{this.props.text}</Text>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    },
    titleBarBox:{
        padding:10,
        flexDirection:'row'
    },
    titleLeft:{
        width:20,
        height:20,
        borderRadius:3,
        marginRight:10,
        backgroundColor:'rgb(79,145,237)'
    },
    itemBox:{
        padding:3,
        borderWidth:1,
        borderColor:'rgb(79,145,237)',
        borderRadius:3,
        marginRight:20,
        marginTop:10,
    },
    listArea:{
        flexDirection:'row',
        flexWrap:'wrap',
        paddingBottom:10,
        paddingLeft:20,
        paddingRight:20,
    }
    
});